<template>
    <div>
      <h1>现有商品管理</h1>
      <el-table :data="goods" style="width: 100%">
        <el-table-column prop="code" label="编码" width="200" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="quantity" label="库存数量" width="100" />
        <el-table-column prop="purchasePrice" label="进货价" width="100" />
        <el-table-column prop="salePrice" label="零售价" width="100" />
  
        <!-- “操作”列 -->
        <el-table-column label="操作" width="240">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="viewDetails(scope.row)">详情</el-button>
            <el-button type="warning" size="mini" @click="editGoods(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 详情 Dialog -->
      <el-dialog v-model="dialogVisible" title="商品详情">
        <el-form :model="selectedGoods" label-width="100px">
          <el-form-item label="编码">
            <el-input v-model="selectedGoods.code" disabled />
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="selectedGoods.name" disabled />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="selectedGoods.type" disabled />
          </el-form-item>
          <el-form-item label="库存数量">
            <el-input v-model="selectedGoods.quantity" disabled />
          </el-form-item>
          <el-form-item label="进货价">
            <el-input v-model="selectedGoods.purchasePrice" disabled />
          </el-form-item>
          <el-form-item label="零售价">
            <el-input v-model="selectedGoods.salePrice" disabled />
          </el-form-item>
          <el-form-item label="经销商">
            <el-input v-model="selectedGoods.dealer" disabled />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
  
      <!-- 修改 Dialog -->
      <el-dialog v-model="editDialogVisible" title="修改商品信息">
        <el-form :model="editGoodsForm" label-width="100px">
          <el-form-item label="编码">
            <el-input v-model="editGoodsForm.code" disabled />
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="editGoodsForm.name" />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="editGoodsForm.type" />
          </el-form-item>
          <el-form-item label="库存数量">
            <el-input-number v-model="editGoodsForm.quantity" :min="1" />
          </el-form-item>
          <el-form-item label="进货价">
            <el-input-number v-model="editGoodsForm.purchasePrice" :min="0" :step="0.01" />
          </el-form-item>
          <el-form-item label="零售价">
            <el-input-number v-model="editGoodsForm.salePrice" :min="0" :step="0.01" />
          </el-form-item>
          <el-form-item label="经销商">
            <el-input v-model="editGoodsForm.dealer" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveGoods">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { ref } from 'vue';
  
  export default {
    name: 'GoodsManagementView',
    setup() {
      const goods = ref([]);
      const dialogVisible = ref(false);
      const editDialogVisible = ref(false);
      const selectedGoods = ref({});
      const editGoodsForm = ref({});
  
      const fetchGoods = async () => {
        try {
          const response = await axios.get('http://localhost:3000/goods');
          goods.value = response.data;
          console.log('Goods fetched:', goods.value);
        } catch (error) {
          console.error('获取商品数据失败:', error);
        }
      };
  
      const viewDetails = (goodsItem) => {
        selectedGoods.value = { ...goodsItem };
        dialogVisible.value = true;
      };
  
      const editGoods = (goodsItem) => {
        editGoodsForm.value = { ...goodsItem };
        editDialogVisible.value = true;
      };
  
      const saveGoods = async () => {
        try {
          const response = await axios.put(`http://localhost:3000/goods/${editGoodsForm.value.id}`, editGoodsForm.value);
          console.log('Goods updated:', response.data);
          fetchGoods(); // 更新商品列表
          editDialogVisible.value = false; // 关闭修改 Dialog
        } catch (error) {
          console.error('更新商品信息失败:', error);
        }
      };
  
      return {
        goods,
        dialogVisible,
        editDialogVisible,
        selectedGoods,
        editGoodsForm,
        fetchGoods,
        viewDetails,
        editGoods,
        saveGoods,
      };
    },
    mounted() {
      this.fetchGoods();
    },
  };
  </script>
  
  <style scoped>
  h1 {
    margin-bottom: 20px;
  }
  
  .el-table {
    background-color: #fff;
  }
  
  .el-table-column {
    text-align: center;
  }
  </style>
  